<template>
  <div class='opinion-list bc-white'>
    <ul>
      <li v-for="(item,index) in listData" :key="index" @click="showDetail(item)">
        <p class="item1">
          <span :class="'category'+[categoryArray.indexOf(item.category_name)]">{{item.category_name}}</span>
          <span class="fr">{{item.date}}</span>
        </p>
        <p class="item2">
          <span>姓名：{{item.name}}</span>
          <span class="fr">专业班级：{{item.class}}</span>
        </p>
        <p class="white-space">{{item.content}}</p>
      </li>
    </ul>
    <p class="no-data" v-if="formatListData.length===0">暂时没有数据哦~</p>
  </div>
</template>
<script>
export default {
  props:['listData','routerDetail'],
  components: {},
  name: "",
  data() {
    return {
      categoryArray:["功能改进","生活","情感","学习","就业"]
    };
  },
  computed:{
    formatListData(){
      return this.listData||[]
    }
  },
  methods:{
    showDetail(item){
      if(this.routerDetail)this.routerDetail(item)
    }
  }
};
</script>
<style lang="scss" scoped>
.opinion-list {
  li{
    padding: 20px 30px;
    box-sizing: border-box;
    border-bottom: 1px solid #efeff4;

    .item1{
      color: #666;
      font-size: 13px;
      span:nth-of-type(1){
        font-size: 16px;
        height: 50px;
        line-height: 50px;
      }

      .category0{
        color: #4a90e2;
      }
      .category1{
        color: #7ed321;
      }
      .category2{
        color: #f5a623
      }
      .category3{
        color: #ff6b64;
      }
      .category4{
        color: #00998d;
      }
    }
    .item2{
      font-size: 13px;
      margin-top: 5px;
    }
    .white-space{
      font-size: 13px;
      margin-top: 10px;
    }
  }
}
</style>